import React, { useState } from 'react';
import { Input, Button } from 'antd';
import { SearchOutlined, CloseOutlined, ArrowLeftOutlined,DeleteOutlined } from '@ant-design/icons';

const Select = () => {

  // 声明输入框的值的状态
  const [searchValue, setSearchValue] = useState([]);
  // 声明历史记录数组的状态
  const [history, setHistory] = useState([]);

  // 搜索函数
  const onSearch = () => {
    console.log('搜索', searchValue.join(""));
    // 将搜索的关键字添加到历史记录数组中
    setHistory([...history, searchValue.join("")]);
  };

  // 删除函数
  const clearInput = () => {
    console.log('删除');
    setSearchValue([]); // 重置输入框的值
  };

  // 删除历史记录项函数
  const deleteHistory = (index) => {
    //删除历史记录的每一项，一个一个删除
    // const newHistory = [...history];
    // newHistory.splice(index, 1);
    // setHistory(newHistory);
    setHistory([]); // 将历史记录数组重置为空数组
  };
  

  // 返回函数
  const goBack = () => {
    console.log('返回');
  };

  return (
    <div>
      <Input 
      placeholder="输入搜索关键字"
      value={searchValue.join("")}
      onChange={(e) => setSearchValue([e.target.value])}
      style={{ width: 300 }}
      suffix={
        searchValue.length > 0 ? (
        <CloseOutlined onClick={clearInput} style={{ cursor: 'pointer' }} />
        ) : null
        }
      />
      <Button
        onClick={onSearch}
        icon={<SearchOutlined />}
        style={{
          marginLeft: 10,
          background: '#55CA92',
          color: 'white',
          borderRadius: '10px'
        }}
      >
        搜索
      </Button>
      <Button
        onClick={goBack}
        icon={<ArrowLeftOutlined />}
        style={{
          background: '#55CA92',
          color: 'white',
          float: 'right',
          borderRadius: '10px'
        }}
      >
        返回
      </Button>
      {history.length > 0 && (
        <div
          style={{
            marginTop: 30,
            fontWeight: 'normal',
            color: '#55CA92',
            height: 80,
          }}
        >
          <span>
            历史记录
            <DeleteOutlined
              onClick={deleteHistory} // 绑定删除历史记录函数
              style={{ cursor: 'pointer', float:'right' }}
            />
          </span>
          <hr></hr>
          <div style={{display:'flex',flexWrap: 'wrap',color:'black'}}>
          {history.map((item, index) => (
            <div key={index} style={{width: 'calc(100% / 6)', marginBottom: 10}}>{item}</div>
            // <CloseOutlined onClick={() => deleteHistory(index)} style={{ cursor: 'pointer', marginLeft: 10 }}/>每个历史记录后面带一个删除的按键
          ))}
          </div>
        </div>
      )}
      <div style={{ height: 190 }}></div>
      <p
        style={{
          fontWeight: 'normal',
          color: '#55CA92'
        }}
      >
        猜你想搜
      </p>
      <hr></hr>
      <div style={{ height: 200 }}>
        {/*想搜索的内容*/}
      </div>
    </div>
  );
};

export default Select;